<template>
	<view  class="index-main">
		<cu-custom :bgImage="bgImage" :topTitle="topTitle" :needBack="false" backIconColor="#ffffff" titleClass="commTitle white"></cu-custom>
		<view class="index-container">
			<!-- 判断显示的首页 -->
			<keep-alive>
				<admin-index v-show="pageCur == 'index' && isAdminRole"  ref="adminIndex" />
				<apply-index v-show="pageCur == 'index' && !isAdminRole"  ref="applyIndex" />
				<my-task v-show="pageCur == 'work'" ref="myTaskRef" />
				<mine v-show="pageCur == 'mine'" ref="mineRef" />
			</keep-alive>
		</view>
		<view class="tabbars" :style="{height: 'calc(100rpx + '+ iphonexHight +'px)'}">
			<view v-if="roleKey != 'EXPERT'" @click="pageCur='index'" class="tabbar">
				<image class="tabbar-img" :src="'/static/images/'+[pageCur == 'index' ? 'home-selected':'home-unselected' ] +'.png'"></image>
				<view class="tabbar-title" :class="{act: pageCur == 'index'}">首页</view>
			</view>
			<view @click="pageCur='work'" class="tabbar">
				<image class="tabbar-img" :src="'/static/images/'+[pageCur == 'work' ? 'task-selected':'task-unselected' ] +'.png'"></image>
				<view class="tabbar-title" :class="{act: pageCur == 'work'}">工作台</view>
			</view>
			<view @click="pageCur='mine'" class="tabbar">
				<image class="tabbar-img" :src="'/static/images/'+[pageCur == 'mine' ? 'profile-selected':'profile-unselected' ] +'.png'"></image>
				<view class="tabbar-title" :class="{act: pageCur == 'mine'}">我的</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import AdminIndex from './components/adminIndex.vue'
	import ApplyIndex from './components/applyIndex.vue'
	import MyTask from '@/pages/myTask/index.vue'
	import Mine from '@/pages/my/index.vue'
	export default {
		components: {
			AdminIndex,
			ApplyIndex,
			MyTask,
			Mine
		},
		data() {
			return {
				bgImage: require("@/static/images/home/home_header.png"),
				pageCur: 'index',
				roleKey: '',
				isAdminRole: true,
				iphonexHight: 0
			};
		},
		watch: {
			pageCur() {
				this.initPageData()
			}
		},
		computed: {
			topTitle() {
				let title = ''
				if (this.pageCur == 'work') {
					title = '工作台'
				} else if (this.pageCur == 'mine') {
					title = '我的'
				}
				return title
			}
		},
		onLoad() {
			// 判断角色
			let userInfo = uni.getStorageSync("userInfo") || {}
			if (userInfo.roles && userInfo.roles.length > 0) {
				this.roleKey = userInfo.roles[0].roleKey;
				let tempPageCur = 'index'
				if (this.roleKey == 'EXPERT') {
					tempPageCur = 'work'
				}
				this.pageCur = tempPageCur
				this.isAdminRole = this.roleKey == 'admin'
				uni.setStorageSync('isAdminRole', '1')
			}
			
			let that = this
			uni.getSystemInfo({
				success(res) {
					console.log('hjere', res);
					let height = 0
					if(res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 1') != -1){
						height = uni.upx2px(34)
					}
					that.iphonexHight = height
					uni.setStorageSync('iphonexHight', height)
				}
			});
		},
		onShow() {
			console.log('onShow');
			let token = uni.getStorageSync("access_token") || ''
			if (!token) {
				return
			}
			this.initPageData()
		},
		methods: {
			initPageData() {
				this.$nextTick(() => {
					if (this.pageCur == 'index') {
						if (this.isAdminRole) {
							this.$refs.adminIndex.initData()
						} else {
							this.$refs.applyIndex.initData()
						}
					} else if (this.pageCur == 'work') {
						this.$refs.myTaskRef.initData()
					} else {
						this.$refs.mineRef.initData()
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
// index 样式
.index-main {
	width: 100%;
	height: calc(100vh - 102rpx);
	display: flex;
	flex-direction: column;
}
.index-container {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.tabbars {
	width: 100%;
	height: 100rpx;
	box-shadow: 6upx 6upx 8upx 6upx rgba(114, 130, 138, 0.2);
	display: flex;
	justify-content: space-around;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	.tabbar {
		flex: 1;
		font-size: 22rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.tabbar-img {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 5rpx;
		}
		.tabbar-title {
			color: #494753;
		}
		.tabbar-title.act {
			color: #427EFC;
		}
	}
}
</style>